<template>
    <Modal
            class-name="vertical-center-modal"
            v-model="modal"
            :width="60"
            :title="head_title">
        <div class="row" v-if="modal&&info.id">
            <div class="col-lg-12">
                <div class="card ">
                    <Form ref="formValidate" :model="info" action="javascript:void(0)">
                        <div class="row">
                            <div class="col-md-12">
                                <FormItem>
                                    <div class="row">
                                        <label slot='label' class="control-label text-right col-md-3">主题</label>
                                        <div class="col-md-9">
                                            <Input v-model="info.title" placeholder="请输入主题"/>
                                        </div>
                                    </div>
                                </FormItem>
                                <FormItem>
                                    <div class="row">
                                        <label slot='label' class="control-label text-right col-md-3">简介</label>
                                        <div class="col-md-9">
                                            <CInput v-model="info.content" type="textarea" :maxlength='300' :limit='true' :rows="5" placeholder="请输入简介内容（限 300字）"></CInput>
                                        </div>
                                    </div>
                                </FormItem>
                                <FormItem>
                                    <div class="row">
                                        <label slot='label' class="control-label text-right col-md-3">地址</label>
                                        <div class="col-md-9">
                                            <Input v-model="info.address" placeholder="请输入地址"/>
                                        </div>
                                    </div>
                                </FormItem>
                                <FormItem>
                                    <div class="row">
                                        <label slot='label' class="control-label text-right col-md-3">开始-结束时间</label>
                                        <div class="col-md-9">
                                            <DatePicker
                                                    type="datetimerange"
                                                    :value='cDate'
                                                    format="yyyy-MM-dd HH:mm:ss"
                                                    placeholder="起止时间"
                                                    split-panels
                                                    @on-change='searchSelectStartEndDate'
                                                    style="width: 300px"></DatePicker>
                                        </div>
                                    </div>
                                </FormItem>
                                <FormItem>
                                    <div class="row">
                                        <label slot='label' class="control-label text-right col-md-3">参会人员模板</label>
                                        <div class="col-md-9">
                                            <file-upload p-dir='mee' :p-data='info.template_people_array' :p-count='1' @on-success='fileSuccessBook1' @on-delete='fileDeleteBook1' >
                                                <a class="btn btn-sm btn-outline-primary">上传文件</a>
                                            </file-upload>
                                        </div>
                                    </div>
                                </FormItem>
                                <FormItem>
                                    <div class="row">
                                        <label slot='label' class="control-label text-right col-md-3">附件</label>
                                        <div class="col-md-9">
                                            <file-upload p-dir='mee' :p-data='info.file_array' :p-count='3' @on-success='fileSuccessBook2' @on-delete='fileDeleteBook2' >
                                                <a class="btn btn-sm btn-outline-primary">上传文件</a>
                                            </file-upload>
                                        </div>
                                    </div>
                                </FormItem>
                            </div>
                        </div>
                    </Form>
                </div>
            </div>
        </div>
        <div slot="footer">
            <button class="btn btn-danger" type="button" @click='cancel'>取消</Button>
            <btn-submit class="btn btn-success" type="submit" :p-click="ok">确定</btn-submit>
        </div>
    </Modal>
</template>
<script>
    import serConference from '../../serves/api-conference'
    const setDataDef = {};
    export default{
        props:{

        },
        data () {
            return {
                modal:false,
                type:'',
                info:{},
                file_book1:[],
                file_book2:[],
            }
        },
        computed:{
            cDate(){
                return [this.info.start_at,this.info.end_at]
            },
            head_title(){
                return this.type == 'edit' ? '编辑会议':'添加会议'
            },
        },
        methods: {
            async handleOpen(data){
                this.$set(this,'type',data.type||'edit');
                let res = await serConference.detail({
                    id:data.id
                });
                if(res.code==1){
                    this.file_book1 = res.data.template_people_array;
                    this.file_book2 = res.data.file_array;
                    this.info = Object.assign({},res.data,setDataDef);
                }else{
                    this.$Message.error(res.message);
                }
                this.$set(this,'modal',true);
            },
            cancel () {
                this.$emit('on-change',false);
                this.$set(this,'modal',false);
            },
            searchSelectStartEndDate (value) {
                this.$set(this.info,'start_at',value[0]);
                this.$set(this.info,'end_at',value[1]);
            },
            fileSuccessBook1 (data) {
                let arr = [];
                data.fileList.forEach((v)=>{
                    arr.push({
                        "file_alias": v.alias,
                        "file_size": v.size,
                        "file_name": v.name
                    })
                });
                this.$set(this,'file_book1',arr);
            },
            fileDeleteBook1 (data) {
                this.file_book1.splice(data.index,1);
            },
            fileSuccessBook2 (data) {
                let arr = [];
                data.fileList.forEach((v)=>{
                    arr.push({
                        "file_alias": v.alias,
                        "file_size": v.size,
                        "file_name": v.name
                    })
                });
                this.$set(this,'file_book2',arr);
            },
            fileDeleteBook2 (data) {
                this.file_book2.splice(data.index,1);
            },

            async ok () {
                let url = 'add';
                let data = {
                    title:this.info.title,
                    content:this.info.content,
                    start_at:this.info.start_at,
                    end_at:this.info.end_at,
                    address:this.info.address,
                    template_people:this.file_book1||[],
                    file_list:this.file_book2||[],
                };
                if(this.type=='edit'){
                    data.id = this.info.id;
                    url = 'save';
                }
                let res = await serConference[url](data);
                if(res.code==1){
                    this.$Message.success(res.message);
                    this.$emit('on-change',true);
                    this.$set(this,'modal',false);
                    return true;
                }else{
                    this.$Message.error(res.message);
                    return false;
                }
            },
        },
        components:{
        }
    }
</script>